<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/student'}">学生管理</el-breadcrumb-item>
      <el-breadcrumb-item>维护信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div style="position: relative;margin-left:50%;transform:translateX(-50%)">
        <el-form label-position="right" :model="form" status-icon :rules="rules"
                 ref="form" size="small">
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="form.nickname" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="用户名：" prop="username">
            <el-col>
              <el-input
                prefix-icon="el-icon-user-solid"
                type="text"
                v-model="form.username"
                autocomplete="off"
                placeholder="请输入姓名" :disabled="form.username_d"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-col>
              <el-input
                prefix-icon="el-icon-s-cooperation"
                type="password"
                v-model="form.password"
                autocomplete="off"
                placeholder="请输入密码"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="重复密码：" prop="cpassword">
            <el-col>
              <el-input prefix-icon="el-icon-s-cooperation" type="password" v-model="form.cpassword"
                        placeholder="请输入重复密码"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="姓名：" prop="true_name">
            <el-input v-model="form.true_name" placeholder="请输入真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="mobile">
            <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="学号：" prop="student_number">
            <el-input v-model="form.student_number" placeholder="请输入学号"></el-input>
          </el-form-item>
          <el-form-item label="班级：" prop="classs">
            <el-input v-model="form.classs" placeholder="请输入班级"></el-input>
          </el-form-item>

          <el-form-item>
            <el-col :offset="0">
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button onclick="javascript:window.history.go(-1)">返回</el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {status, student} from "../../request";

export default {
  name: "StudentAdd",
  data() {
    return {
      form: {user_type: 10}, rules: {
        nickname: [{required: true, message: '*必填'}],
        true_name: [{required: true, message: '*必填'}],
        mobile: [{required: true, message: '*必填'}],
        email: [{required: true, message: '*必填'}],
        student_number: [{required: true, message: '*必填'}],
        classs: [{required: true, message: '*必填'}],
      }
    };
  },
  created() {
    if (this.$route.params.id) {
      this.getUserInfo(this.$route.params.id);
    } else {
      this.rules.username = [{required: true, message: '*必填'}];
      this.rules.password = [{required: true, message: '*必填'}];
      this.rules.cpassword = [{required: true, message: '*必填'}];
    }
  },
  methods: {
    async getUserInfo(id) {
      this.form.username_d = true;

      const data = await student.list({field: 'id', value: id});
      if (data.code == status.SUCCESS) {
        const user = data.data.data[0];
        this.form = Object.assign({}, this.form, {
          id: user.id,
          nickname: user.nickname,
          username: user.username,
          true_name: user.user10.true_name,
          mobile: user.user10.mobile,
          email: user.user10.email,
          student_number: user.user10.student_number,
          classs: user.user10.classs,
        });
      }
    },
    onSubmit() {
      this.$refs.form.validate(async valid => {
        if (!valid) return this.$message.error("请完善有效的注册信息！");
        const data = await student.add(this.form);
        if (data.code == status.SUCCESS) {
          this.$message.success(data.msg);
          this.$router.push('/student');
        }
      });
    },
  },
}
</script>

<style scoped>

</style>
